<template>
    <div style="display: flex;flex-direction: column;height: 100%;">
        <!-- 弹窗start -->
        <el-dialog title="添加新的样式" width="500px" :visible.sync="showDislog" append-to-body="True" @closed="initDialog">
            <div style="display: flex;justify-content: center;align-items: center;">
                样式名称 <el-input style="width: 50%;margin-left: 10px;" v-model="nameOfStyle"></el-input>
            </div>
            <div style="display: flex;justify-content: end;margin-top: 10px;">
                <el-button type="primary" @click="saveStyle">确定</el-button>
                <el-button @click="showDislog = false">返回</el-button>
            </div>
        </el-dialog>
        <!-- 弹窗end -->
        <!-- 弹窗start -->
        <el-dialog title="样式设置" width="500px" :visible.sync="showStyleSetting" append-to-body="True" @closed="initDialog">

            <div style="width:500px;height:100%;background-color: #F6F7FB;display: flex;flex-direction: column;">
                <el-checkbox v-model="signalPersonID" style="margin: 30px 30px 10px 30px;">单人识别模式</el-checkbox>
                <div style="display: flex;align-items: center;margin: 10px 30px;">多人模式下人像重复 <el-input
                        style="width: 50%;margin: 0 10px;" v-model="portraitRepeats" :disabled="signalPersonID"></el-input>个</div>
                <div style="margin: 10px 30px;">
                    无人模式下显示图片
                    <el-upload style="margin: 10px 0;" class="avatar-uploader" :action="baseURL + '/api/file/upload/'"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img :src="imageUrl" class="avatar">
                    </el-upload>
                    <div style="color: red;">* 图片格式为jpg，png，gif</div>
                </div>
                <div style="width: 100%;justify-content: center;display: flex;margin: 10px;">
                    <el-button style="background-color:#8694C6;color: white;border: 0;" @click="submitUpdate">确认</el-button>
                    <el-button @click="showStyleSetting = false">返回</el-button>
                </div>
            </div>

        </el-dialog>
        <!-- 弹窗end -->
        <!-- 弹窗start -->
        <el-dialog title="样式轮播设置" width="500px" :visible.sync="showCarouselSetting" append-to-body="True"
            @closed="initDialog">

            <div style="width:500px;height:100%;background-color: #F6F7FB;display: flex;flex-direction: column;">
                <div style="display: flex;align-items: center;margin: 10px;margin-left: 50px;">时间间隔 <el-input
                        style="margin: 0 10px;width: 200px;" v-model="timeInterval"></el-input> 秒
                    <el-tooltip content="识别到用户后显示其人像的时间最小时间间隔为2秒" placement="right" effect="light">
                        <el-button
                            style="margin-left: 10px;background-color:#7082D7;color:white ;width: 20px; height: 20px;display: flex;justify-content: center;align-items: center;"
                            circle>?</el-button>
                    </el-tooltip>
                </div>
                <div style="display: flex;align-items: center;margin: 10px;margin-left: 50px;">切换动画
                    <el-select v-model="toggleAnimation" placeholder="请选择" style="margin: 0 10px;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div style="width: 100%;display: flex;justify-content: center;margin: 10px;">
                    <el-button style="background-color:#8694C6 ;color: white;border: 0;"
                        @click="submitUpdate">确认</el-button>
                    <el-button @click="showCarouselSetting = false">返回</el-button>
                </div>
            </div>

        </el-dialog>
        <!-- 弹窗end -->
        <el-page-header @back="goBack" content="窗口设置" title="设置" style="margin-bottom: 20px;">
        </el-page-header>
        <div
            style="flex: 1;background-color: #EAEEF7;width: calc(100% - 20px);height:100%;padding: 10px;display: flex;flex-direction: column;">
            <div
                style="display: flex;flex-direction: column;background-color: #F6F7FB;padding: 0 10px;margin-bottom: 20px;">
                <div style="display: flex;margin: 10px 0;align-items: center;">
                    <div style="margin-right: 10px;">窗口数量</div> <el-input style="width: 100px;margin-right: 10px;"
                        v-model="windowNum" type="number" @input="changeInput"></el-input> 个
                </div>
                <div style="display: flex;margin: 10px 0;align-items: center;">
                    <div style="margin-right:10px;">窗口宽度</div>
                    <el-input style="width: 100px;margin-right: 10px;" v-model="windowWidth" type="number"
                    @blur="changeInput"></el-input> Px
                    <div style="margin:0 10px;">窗口间隔宽度</div>
                    <el-input style="width: 100px;margin-right: 10px;" v-model="windowMargin" type="number"
                        @input="changeInput"></el-input> Px
                </div>
                <div style="display: flex;margin: 10px 0;align-items: center;">
                    <div style="margin-right: 10px;">窗口布局</div> <el-input style="width: 100px;margin-right: 10px;"
                        v-model="RowNum" type="number" @input="changeInput"></el-input> 行 <el-input
                        style="width: 100px;margin: 0 10px;" v-model="ColumnNum" type="number"
                        @input="changeInput"></el-input> 列
                </div>
            </div>
            <div style="flex: 1;background-color:#F6F7FB;padding: 10px;display: flex;flex-direction: column;">
                <div
                    style="width: 100%;display: flex;justify-content: left;margin: 5px 0;height: 30px;margin-bottom: 20px;">
                    <el-link type="primary" icon="el-icon-plus" style="margin: 0 10px;" circle
                        @click="addNewNode">添加窗口</el-link>
                    <el-link type="danger" icon="el-icon-minus" style="margin: 0 10px;" circle
                        @click="delNode">删除窗口</el-link>
                    <!-- el-icon-edit -->
                    <el-link type="primary" icon="el-icon-edit" circle @click="showWindowInfo"
                        style="margin: 0 10px;">窗口详情</el-link>
                    <transition name="el-zoom-in-center">
                        <div v-if="showEdit" style="display: flex;align-items: center;">
                            x <el-input style="margin: 0 5px;width: 100px;" type="number" v-model="selectX"
                                @input="changeEditDiv(3)"></el-input>
                            y <el-input style="margin: 0 5px;width: 100px;" type="number" v-model="selectY"
                                @input="changeEditDiv(4)"></el-input>
                        </div>
                    </transition>
                    <el-link type="primary" icon="el-icon-delete-solid" circle @click="cleanCanvas"
                        style="margin: 0 10px;">清空画布</el-link>
                    <el-link v-if="editingStyle" type="success" icon="el-icon-check" circle @click="submitUpdateStyle"
                        style="margin: 0 10px;">保存</el-link>
                    <el-link v-if="editingStyle" circle @click="resetStyle" style="margin: 0 10px;">重置</el-link>
                    <el-link v-if="editingStyle" type="primary" circle @click="initPage"
                        style="margin: 0 10px;">新建空白样式</el-link>
                    <div style="display: flex;flex: 1;justify-content: flex-end;">
                        <el-button style="display: flex;align-items: center;"
                            @click="showStyleSetting = true">样式设置</el-button>
                        <el-button style="display: flex;align-items: center;"
                            @click="showCarouselSetting = true">轮播设置</el-button>
                    </div>
                </div>
                <div style="flex: 1; display: flex;">
                    <div id="canvas" style="flex: 13; display: flex;flex-direction: column;background-color: white;">
                    </div>
                    <div style="display: flex;flex-direction: column;align-items: center;flex: 2;margin-left:10px;">
                        样式列表
                        <div
                            style="width: 100%;flex: 1;background-color: white;margin-top: 10px;display: flex;flex-direction: column;align-items: center;padding: 5px;">
                            <div v-for="item, index in styleList" :key="index"
                                style="border: solid 1px black;width: 90%;border-radius: 5px;cursor: pointer;margin: 5px 0;"
                                @click="editOldStyle(item.id)"> {{ item.name }}</div>
                            <el-button icon="el-icon-plus" type="primary" style="width: 90%;margin: 5px;"
                                @click="showDislog = true"></el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import request from "../axios/request";
export default {
    data() {
        return {
            showEdit: false,
            windowNum: 0,
            windowWidth: null,
            windowMargin: 0,
            RowNum: 0,
            ColumnNum: 0,
            // divArr: [],
            newNodeNum: 0,
            curNode: null,
            maxIndex: 0,
            selectWidth: null,
            selectHeight: null,
            selectX: null,
            selectY: null,
            showDislog: false,
            styleList: [],
            nameOfStyle: null,
            signalPersonID: false,
            baseURL: null,
            imageUrl: null,
            showStyleSetting: false,
            showCarouselSetting: false,
            toggleAnimation: null,
            displayId: null,
            options: [
                {
                    value: "animate__bounce",
                    label: "弹跳"
                },
                {
                    value: "animate__flash",
                    label: "闪光"
                },
                {
                    value: "animate__pulse",
                    label: "脉冲"
                },
                {
                    value: "animate__rubberBand",
                    label: "橡皮筋"
                },
                {
                    value: "animate__shakeY",
                    label: "摇晃"
                },
                {
                    value: "animate__headShake",
                    label: "摇头"
                },
                {
                    value: "animate__swing",
                    label: "摆动"
                },
                {
                    value: "animate__wobble",
                    label: "游移不定"
                },
                {
                    value: "animate__jello",
                    label: "果冻"
                },
                {
                    value: "animate__heartBeat",
                    label: "心跳"
                },
            ],
            portraitRepeats: null,
            noBackground: null,
            timeInterval: null,
            editingStyle: null
        }
    },
    methods: {
        async changeInput() {
            this.cleanCanvas()
            var canvas = document.getElementById("canvas");
            var resOfCalculateStyle = await request({
                url: "/api/window/calculateStyle",
                method: "POST",
                data: {
                    windowNum: this.windowNum,
                    windowWidth: this.windowWidth,
                    windowIntervalWidth: this.windowMargin,
                    rowNum: this.RowNum,
                    columnNum: this.ColumnNum,
                    canvasWidth: canvas.getBoundingClientRect().width,
                    canvasHeight: canvas.getBoundingClientRect().height
                }
            });
            var resultArray = resOfCalculateStyle.data.data
            if (resultArray == null) {
                return;
            }
            this.windowWidth=resultArray[0].width
            for (let index = 0; index < resultArray.length; index++) {
                this.newNodeNum++
                resultArray[index].windowId = "editBox" + index
                resultArray[index].index = 0
                this.drowWindow(resultArray[index], 'absolute')
            }
        },

        async resetStyle() {
            this.cleanCanvas()
            let resOfGettingOldStyleInfo = await request({
                url: "/api/style/getStyleInfo/" + this.editingStyle,
                method: "GET"
            });
            var oldWindows = resOfGettingOldStyleInfo.data.data.list
            this.maxIndex = resOfGettingOldStyleInfo.data.data.maxIndex
            this.newNodeNum = resOfGettingOldStyleInfo.data.data.newNodeNum
            for (let index = 0; index < oldWindows.length; index++) {
                this.drowWindow(oldWindows[index])
            }
        },
        async submitUpdateStyle() {
            var list = []
            var canvas = document.getElementById("canvas");
            for (let index = 0; index <= this.newNodeNum; index++) {
                var curWin = document.getElementById("editBox" + index)
                if (curWin == null) {
                    continue;
                }
                var newWin = {
                    width: curWin.getBoundingClientRect().width / canvas.getBoundingClientRect().width,
                    height: curWin.getBoundingClientRect().height / canvas.getBoundingClientRect().height,
                    left: (curWin.style.left.split('px')[0] - canvas.offsetLeft) / canvas.getBoundingClientRect().width,
                    top: (curWin.style.top.split('px')[0] - canvas.offsetTop) / canvas.getBoundingClientRect().height,
                    windowId: curWin.id
                }
                list.push(newWin);
            }
            await request({
                url: "/api/window/submitUpdateStyle",
                method: "POST",
                data: {
                    styleId: this.editingStyle,
                    styleName: this.nameOfStyle,
                    maxIndex: this.maxIndex,
                    newNodeNum: this.newNodeNum,
                    list: list
                }
            });
        },
        cleanCanvas() {
            console.log(this.newNodeNum);
            for (let index = 0; index <= this.newNodeNum; index++) {
                var curWin = document.getElementById("editBox" + index)
                if (curWin == null) {
                    continue
                }
                console.log(curWin);
                curWin.remove()
            }
            this.newNodeNum = 0
            this.maxIndex=0
            this.curNode=null
        },
        async submitUpdate() {
            var data = {
                id: this.displayId,
                signalPersonId: this.signalPersonID,
                portraitRepeats: this.portraitRepeats,
                noBackground: this.noBackground,
                timeInterval: this.timeInterval,
                toggleAnimation: this.toggleAnimation
            }
            console.log(data);
            var resOfSubmitUpdate = await request({
                url: "/api/display/submitUpdate",
                method: "POST",
                data: data
            });
            if (resOfSubmitUpdate.data.status == 200) {
                this.initPage()
            }
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.noBackground = res.data
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        showWindowInfo() {
            this.showEdit = !this.showEdit

        },
        delNode() {
            this.windowNum--;
            if (this.curNode == null) {
                return;
            }
            // var curNode = document.getElementById(this.curNode)
            this.curNode.remove()
        },
        async saveStyle() {
            var list = []
            var canvas = document.getElementById("canvas");
            for (let index = 0; index <= this.newNodeNum; index++) {
                var curWin = document.getElementById("editBox" + index)
                if (curWin == null) {
                    continue;
                }
                var newWin = {
                    width: curWin.getBoundingClientRect().width / canvas.getBoundingClientRect().width,
                    height: curWin.getBoundingClientRect().height / canvas.getBoundingClientRect().height,
                    left: (curWin.style.left.split('px')[0] - canvas.offsetLeft) / canvas.getBoundingClientRect().width,
                    top: (curWin.style.top.split('px')[0] - canvas.offsetTop) / canvas.getBoundingClientRect().height,
                    windowId: curWin.id
                }
                list.push(newWin);
            }
            let resOfSaveWindow = await request({
                url: "/api/window/saveWindows",
                method: "POST",
                data: {
                    styleName: this.nameOfStyle,
                    maxIndex: this.maxIndex,
                    newNodeNum: this.newNodeNum,
                    list: list
                }
            });
            if (resOfSaveWindow.data.status == 200) {
                this.showDislog = false
                this.initPage()
            }
        },
        async editOldStyle(id) {
            this.editingStyle = id
            this.cleanCanvas()
            let resOfGettingOldStyleInfo = await request({
                url: "/api/style/getStyleInfo/" + id,
                method: "GET"
            });

            var oldWindows = resOfGettingOldStyleInfo.data.data.list
            this.maxIndex = resOfGettingOldStyleInfo.data.data.maxIndex
            this.newNodeNum = resOfGettingOldStyleInfo.data.data.newNodeNum
            for (let index = 0; index < oldWindows.length; index++) {
                this.drowWindow(oldWindows[index])
            }

        },
        drowWindow(myWindow, type) {
            var canvas = document.getElementById("canvas");
            var font3 = document.createElement("div")
            font3.style = "position: absolute;bottom:0px;right:5px;color:black;"
            var font4 = document.createElement("div")
            font4.style = "position: absolute;top:10px;right:5px;color:black;transform: rotate(-90deg); -ms-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-o-transform: rotate(-90deg);"
            var font1 = document.createElement("div")
            font1.style = "position: absolute;top:0px;left:5px;color:black;"
            var font2 = document.createElement("div")
            font2.style = "color:black;position: absolute;bottom:5px;left:0px;transform: rotate(90deg); -ms-transform: rotate(90deg);-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-o-transform: rotate(90deg);"
            var box = document.createElement("div")
            box.id = myWindow.windowId
            font1.id = "font1"
            font2.id = "font2"
            font3.id = "font3"
            font4.id = "font4"
            var circle = document.createElement("div")
            circle.id = "editCircle"
            circle.style = "width: 50px;height: 50px;background-color: grey; border-radius: 50%;"
            // 计算width值和height值
            var width = null
            var height = null
            var left = null
            var top = null
            if (type == null) {
                width = Math.floor(canvas.getBoundingClientRect().width * (Number(myWindow.width.split("%")[0]) / 100))
                height = Math.floor(canvas.getBoundingClientRect().height * (Number(myWindow.height.split("%")[0]) / 100))
                left = Math.floor(canvas.getBoundingClientRect().width * (Number(myWindow.left.split("%")[0]) / 100) + canvas.offsetLeft)
                top = Math.floor(canvas.getBoundingClientRect().height * (Number(myWindow.top.split("%")[0]) / 100) + canvas.offsetTop)
            } else if (type == 'absolute') {
                width = myWindow.width
                height = myWindow.height
                left = Number(myWindow.left)+ canvas.offsetLeft
                top = Number(myWindow.top)+ canvas.offsetTop
            }
            box.style = "position: absolute;width: " + width + "px;height: " + height + "px;resize: both;overflow: hidden;display: flex;justify-content: center;align-items: center;border:dashed 1px black;background-color: white;"
            font1.innerText = top
            font2.innerText = left
            box.style.left = left + 'px'
            box.style.top = top + 'px'
            box.insertBefore(circle, null);
            box.insertBefore(font1, null);
            box.insertBefore(font2, null);
            box.insertBefore(font3, null);
            box.insertBefore(font4, null);
            canvas.insertBefore(box, null);
            const elementResizeDetectorMaker = require("element-resize-detector");
            let erd = elementResizeDetectorMaker();
            var that = this
            erd.listenTo(box, (ele) => {
                that.curNode = box
                font3.innerText = ele.offsetWidth
                font4.innerText = ele.offsetHeight
                that.syncData()
            })
            box.addEventListener('click', function (event) {
                that.curNode = box
                that.syncData()
                box.style.zIndex = myWindow.index
            })
            circle.addEventListener('mousedown', function (event) {
                event.preventDefault(); // 防止默认的文本选中等行为发生
                window.addEventListener('mousemove', moveHandler); // 注册移动事件处理函数
                window.addEventListener('mouseup', upHandler); // 注册松开事件处理函数
                that.curNode = box
                function moveHandler(e) {
                    e.preventDefault(); // 防止页面滚动
                    var x = e.clientX - 190 - (box.getBoundingClientRect().width / 2); // 计算新的left值
                    var y = e.clientY - (box.getBoundingClientRect().height / 2); // 计算新的top值
                    x = x >= canvas.offsetLeft && x <= canvas.offsetLeft + canvas.getBoundingClientRect().width - box.getBoundingClientRect().width ? x : (x < canvas.offsetLeft ? canvas.offsetLeft : canvas.offsetLeft + canvas.getBoundingClientRect().width - box.getBoundingClientRect().width);
                    y = y >= canvas.offsetTop && y <= canvas.offsetTop + canvas.getBoundingClientRect().height - box.getBoundingClientRect().height ? y : (y < canvas.offsetTop ? canvas.offsetTop : canvas.offsetTop + canvas.getBoundingClientRect().height - box.getBoundingClientRect().height);
                    box.style.left = x + 'px'; // 修改元素的left样式
                    box.style.top = y + 'px'; // 修改元素的top样式
                    font1.innerText = Math.floor(y)
                    font2.innerText = Math.floor(x)
                    that.syncData()
                }
                function upHandler() {
                    window.removeEventListener('mousemove', moveHandler); // 移除移动事件处理函数
                    window.removeEventListener('mouseup', upHandler); // 移除松开事件处理函数
                }
            });
        },
        changeEditDiv(index) {
            switch (index) {
                case 1:
                    this.curNode.style.width = this.selectWidth + 'px'
                    break;
                case 2:
                    this.curNode.style.height = this.selectHeight + 'px'
                    break;
                case 3:
                    var canvas = document.getElementById("canvas");
                    if (this.selectX >= canvas.offsetLeft && this.selectX <= canvas.offsetLeft + canvas.getBoundingClientRect().width - this.curNode.getBoundingClientRect().width) {
                        this.curNode.style.left = this.selectX + 'px'
                        this.curNode.children[2].innerText = this.selectX
                    }
                    break;
                default:
                    var canvas = document.getElementById("canvas");
                    if (this.selectY >= canvas.offsetTop && this.selectY <= canvas.offsetTop + canvas.getBoundingClientRect().height - this.curNode.getBoundingClientRect().height) {
                        this.curNode.style.top = this.selectY + 'px'
                        this.curNode.children[1].innerText = this.selectY
                    }
                    break;
            }
        },
        addNewNode() {
            this.newNodeNum++
            this.windowNum++
            var canvas = document.getElementById("canvas");
            var font3 = document.createElement("div")
            font3.style = "position: absolute;bottom:0px;right:5px;color:black;"
            var font4 = document.createElement("div")
            font4.style = "position: absolute;top:10px;right:5px;color:black;transform: rotate(-90deg); -ms-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-o-transform: rotate(-90deg);"
            var font1 = document.createElement("div")
            font1.style = "position: absolute;top:0px;left:5px;color:black;"
            var font2 = document.createElement("div")
            font2.style = "color:black;position: absolute;bottom:5px;left:0px;transform: rotate(90deg); -ms-transform: rotate(90deg);-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-o-transform: rotate(90deg);"
            var box = document.createElement("div")
            box.id = "editBox" + this.newNodeNum
            font1.id = "font1"
            font2.id = "font2"
            font3.id = "font3"
            font4.id = "font4"
            var circle = document.createElement("div")
            circle.id = "editCircle" + this.newNodeNum
            circle.style = "width: 50px;height: 50px;background-color: grey; border-radius: 50%;"
            box.style = "position: absolute;width: 100px;height: 100px;resize: both;overflow: hidden;display: flex;justify-content: center;align-items: center;border:dashed 1px black;background-color: white;"
            font1.innerText = canvas.offsetTop
            font2.innerText = canvas.offsetLeft
            box.style.left = canvas.offsetLeft + 'px'
            box.style.top = canvas.offsetTop + 'px'
            box.insertBefore(circle, null);
            box.insertBefore(font1, null);
            box.insertBefore(font2, null);
            box.insertBefore(font3, null);
            box.insertBefore(font4, null);
            canvas.insertBefore(box, null);
            const elementResizeDetectorMaker = require("element-resize-detector");
            let erd = elementResizeDetectorMaker();
            var that = this
            erd.listenTo(box, (ele) => {
                that.curNode = box
                font3.innerText = ele.offsetWidth
                font4.innerText = ele.offsetHeight
                that.syncData()
            })

            box.addEventListener('click', function (event) {
                that.curNode = box
                that.syncData()
                box.style.zIndex = that.maxIndex
                that.maxIndex++
            })
            circle.addEventListener('mousedown', function (event) {
                event.preventDefault(); // 防止默认的文本选中等行为发生
                window.addEventListener('mousemove', moveHandler); // 注册移动事件处理函数
                window.addEventListener('mouseup', upHandler); // 注册松开事件处理函数
                that.curNode = box
                function moveHandler(e) {
                    e.preventDefault(); // 防止页面滚动
                    var x = e.clientX - 190 - (box.getBoundingClientRect().width / 2); // 计算新的left值
                    var y = e.clientY - (box.getBoundingClientRect().height / 2); // 计算新的top值
                    x = x >= canvas.offsetLeft && x <= canvas.offsetLeft + canvas.getBoundingClientRect().width - box.getBoundingClientRect().width ? x : (x < canvas.offsetLeft ? canvas.offsetLeft : canvas.offsetLeft + canvas.getBoundingClientRect().width - box.getBoundingClientRect().width);
                    y = y >= canvas.offsetTop && y <= canvas.offsetTop + canvas.getBoundingClientRect().height - box.getBoundingClientRect().height ? y : (y < canvas.offsetTop ? canvas.offsetTop : canvas.offsetTop + canvas.getBoundingClientRect().height - box.getBoundingClientRect().height);
                    box.style.left = x + 'px'; // 修改元素的left样式
                    box.style.top = y + 'px'; // 修改元素的top样式
                    font1.innerText = Math.floor(y)
                    font2.innerText = Math.floor(x)
                    that.syncData()
                }
                function upHandler() {
                    window.removeEventListener('mousemove', moveHandler); // 移除移动事件处理函数
                    window.removeEventListener('mouseup', upHandler); // 移除松开事件处理函数
                }
            });
        },


        syncData() {
            this.selectHeight = Math.floor(this.curNode.getBoundingClientRect().height)
            this.selectWidth = Math.floor(this.curNode.getBoundingClientRect().width)
            this.selectY = this.curNode.style.top.split('px')[0]
            this.selectX = this.curNode.style.left.split('px')[0]
        },
        async initPage() {
            this.cleanCanvas()
            this.editingStyle = null
            this.windowNum = 0
            this.showCarouselSetting = false
            this.showDislog = false
            this.showStyleSetting = false
            this.newNodeNum = 0
            this.curNode = null
            this.maxIndex = 0
            this.selectWidth = null
            this.selectHeight = null
            this.selectX = null
            this.selectY = null
            // 获取样式列表
            let resOfGettingStyleList = await request({
                url: "/api/style/getStyleList",
                method: "GET"
            });
            this.styleList = resOfGettingStyleList.data.data
            // 获取display属性
            let resOfGettingDisplayInfo = await request({
                url: "/api/display/getDisplayInfo",
                method: "GET"
            });
            var displayInfo = resOfGettingDisplayInfo.data.data
            console.log(displayInfo);
            if (displayInfo != null) {
                this.displayId = displayInfo.id
                this.signalPersonID = displayInfo.signalPersonId
                this.portraitRepeats = displayInfo.portraitRepeats
                this.noBackground = displayInfo.noBackground
                this.imageUrl = displayInfo.noBackground
                this.timeInterval = displayInfo.timeInterval
                this.toggleAnimation = displayInfo.toggleAnimation
            }
        }
    },
    watch: {

    },
    async mounted() {
        this.baseURL = request.defaults.baseURL
        this.initPage()
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: white;
    width: 200px;
    height: 200px;
    background: url("../assets/OIP-C.png") center center;
    background-size: contain;
    box-shadow: 0 10px 5px 0 rgba(237, 239, 241, 0.35);
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar {
    width: 200px;
    height: 200px;
    display: block;
}

#canvas div {
    background: url('../assets/user.png') center center no-repeat;
    background-size:  cover;
}

#canvas div div {
    opacity: 0.5;
    background-size: cover;
    background-image: none;
}
</style>